<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Mini小红书 - 发现生活的美好">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="theme-color" content="#ff2442">
    <meta name="keywords" content="小红书,迷你小红书,Mini XHS,社交,发现">

    <title>Mini小红书</title>
    <!-- 构建说明：这是一个Vue 3 + Vite项目，需要通过开发服务器或构建后查看 -->
    <!-- 查看方法：
         1. 开发环境：通过 http://localhost:5173/ 访问（当开发服务器运行时）
         2. 生产环境：运行 npm run build 构建后，使用静态服务器部署dist目录
    -->
    <style>
      :root {
        --primary-color: #ff2442;
        --text-color: #333;
        --light-text: #666;
        --border-color: #e8e8e8;
        --background-color: #f8f9fa;
        --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }
      
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        color: var(--text-color);
        background-color: var(--background-color);
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-tap-highlight-color: transparent;
      }
      
      #app {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }
      
      a {
        color: inherit;
        text-decoration: none;
      }
      
      /* 预加载样式 */
      .app-loading {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: var(--background-color);
        z-index: 9999;
      }
      
      .app-loading .logo {
        width: 60px;
        height: 60px;
        margin-bottom: 16px;
        animation: pulse 1.5s ease-in-out infinite;
      }
      
      .app-loading .text {
        color: var(--primary-color);
        font-size: 16px;
        font-weight: 500;
      }
      
      @keyframes pulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.1); opacity: 0.8; }
      }
      
      /* 确保正确加载前的隐藏 */
      [v-cloak] {
        display: none;
      }
      
      button {
        font-family: inherit;
      }
    </style>
  </head>
  <body>
    <!-- 应用容器 -->
    <div id="app" v-cloak></div>
    
    <!-- 构建说明提示（当直接打开HTML文件时显示） -->
    <div class="build-instructions" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: white; padding: 20px; z-index: 9999;">
      <div style="max-width: 600px; margin: 0 auto; text-align: center; padding-top: 100px;">
        <h2 style="color: var(--primary-color); font-size: 24px; margin-bottom: 20px;">Mini小红书项目构建说明</h2>
        <div style="text-align: left; background: #f5f5f5; padding: 20px; border-radius: 12px; margin-bottom: 20px; font-size: 14px; line-height: 1.6;">
          <p><strong>注意：</strong>这是一个Vue 3 + Vite项目，不能直接通过浏览器打开HTML文件查看。</p>
          <p style="margin-top: 15px;"><strong>正确的查看方法：</strong></p>
          <ol style="list-style-position: inside; padding-left: 10px;">
            <li style="margin-top: 8px;">开发模式：<code style="background: #e8e8e8; padding: 2px 6px; border-radius: 4px;">npm run dev</code> 然后访问 <a href="http://localhost:5173/" style="color: var(--primary-color);">http://localhost:5173/</a></li>
            <li style="margin-top: 8px;">生产模式：<code style="background: #e8e8e8; padding: 2px 6px; border-radius: 4px;">npm run build</code> 构建后部署dist目录</li>
          </ol>
        </div>
        <div style="color: #666; font-size: 12px;">当前项目正在开发环境中运行，服务地址：<a href="http://localhost:5173/" style="color: var(--primary-color);">http://localhost:5173/</a></div>
      </div>
    </div>
    
    <script type="module" src="/src/main.js"></script>
    
    <!-- 检测是否通过服务器访问 -->
    <script>
      // 检查当前页面是否通过HTTP协议加载（而不是file://协议）
      if (window.location.protocol === 'file:') {
        // 如果直接打开HTML文件，则显示构建说明
        document.querySelector('.build-instructions').style.display = 'block';
      }
    </script>
  </body>
</html>
